/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions} from 'react-native';
import { Icon } from 'antd-mobile-rn';

// project
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../../library/comp';

import Licon from '../../../../library/comp/project/icon';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Cash extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			// 余额使用记录的变量
			list:[
				{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
			]
		}
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<CPage>

				{/* 页面顶部部分，此部分不随页面滚动，所以没有放在CContent标签内 */}
				<View style={{position:'absolute',top:40, zIndex:10,width: Dimensions.get('window').width}}>
					<CRow bg='#2a2f30' pa='20' pt='80' x='center' y='center'>
						<CText color='#2bc76f' size='28'>账户余额</CText>
					</CRow>
					<CRow bg='#2a2f30' pb='40' x='center' y='center'>
						<CText bold color='#fff' size='52'>￥</CText>
						<CText bold color='#fff' size='64'>1000</CText>
					</CRow>
					<CRow bg='#2a2f30' pb='80' x='center' y='center'>
						<View style={{borderColor:'#2bc76f', borderWidth:1, width:140,  display:'flex', alignItems:'center', paddingTop:8, paddingBottom:8, borderRadius:5}}><CText bold color='#2bc76f' size='30'>充值</CText></View>
					</CRow>
					<CRow rt='40' pt='40' px='30' bg='#fff' mt='-40' h='60'></CRow>
				</View>
				

				<CContent mt='520' bg='#fff' >

					{/* 循环余额变更的记录 */}
					<View style={{paddingLeft:15,paddingRight:15}}>
						{this.state.list.map(() => {
							return (<CHand bb='2 #dedee0' py='10'>
								<CItemY f='1'>
									<CText>余额支付订单</CText>
									<CText color='#b8b8b8' size='26' pt='5'>2018-09-22 10:54:14</CText>
								</CItemY>
								<CItemX f='1' x='right' y='center'>
									<CText pr='20' size='26'>-105.01</CText>
								</CItemX>
							</CHand>);
						})}
					</View>

				</CContent>

                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff'>
                    <CBetween px='20'>
                        <CHand onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>余额</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}
                
			</CPage>
		);
	}
}
